<template>
  <el-card shadow="always">
    <!-- 表格 -->
    <el-table border stripe :data="skuList.records" style="margin:20px 0">
      <el-table-column label="序号" type="index" align="center" width="80px">
      </el-table-column>
      <el-table-column
        prop="skuName"
        label="名称"
        width="120px"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="skuDesc"
        label="描述"
        width="120px"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column label="默认图片" width="180px">
        <template #="{ row, $index }">
          <img
            :src="row.skuDefaultImg"
            alt=""
            style="width: 70px; height: 90px"
          />
        </template>
      </el-table-column>
      <el-table-column prop="weight" label="重量(千克)" width="100px">
      </el-table-column>
      <el-table-column prop="price" label="价格(元)" width="100px">
      </el-table-column>
      <el-table-column label="操作">
        <template #="{ row, $index }">
          <el-button
            :type="row.isSale == 0 ? 'success' : 'info'"
            :icon="row.isSale == 0 ? Top : Bottom"
            :title="row.isSale == 0 ? '下架' : '上架'"
            size="small"
            @click="changeIsSale(row)"
          ></el-button>
          <el-button
            type="primary"
            size="small"
            :icon="Edit"
            @click="
              ElMessage({ type: 'warning', message: '开发中,敬请期待...' })
            "
          ></el-button>
          <el-button type="info" size="small" :icon="InfoFilled"></el-button>
          <el-button type="danger" size="small" :icon="Delete"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      @current-change="getSkuList"
      @size-change="changeHandler"
      v-model:current-page="currentPage"
      :page-sizes="[10, 20, 30]"
      v-model:page-size="pageSize"
      layout=" prev, pager, next, jumper,->,sizes,total"
      :total="skuList.total"
      background
      :pager-count="7"
    >
    </el-pagination>
     <el-drawer v-model="drawer">
    <span>Hi there!</span>
  </el-drawer>
  </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { reqSkuList } from "@/api/product/sku/sku";
import { ElMessage } from "element-plus";
// 引入icon图标
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
  //加号
  Plus,
  Top,
  Bottom,
  InfoFilled,
} from "@element-plus/icons-vue";

// 定义当前第几页
let currentPage = ref<number>(1);
// 一页多少条
let pageSize = ref<number>(10);

// 定义存储sku列表的数据
let skuList = ref({});
// 显示或隐藏抽屉
let drawer = ref<boolean>(false)

// 组件一挂载就发请求拿数据
onMounted(() => {
  getSkuList();
});

// 定义获取sku列表的方法
const getSkuList = async (pager:number=1) => {
  currentPage.value = pager
  let result = await reqSkuList(currentPage.value, pageSize.value);
  console.log(result);
  skuList.value = result;
};

// 点击下拉框改变一页展示几条数据的回调
const changeHandler = (limit:number)=>{
  pageSize.value = limit
  getSkuList()
}

// 点击操作的第一个按钮改变状态的回调
const changeIsSale = (row) => {
  // 切换商品的上下架状态
  row.isSale == 0 ? (row.isSale = 1) : (row.isSale = 0);
};
</script>

<style scoped>
</style>